@extends('LevelIntroduction.template.layout')

@section('resources')
  <style>
    #level {
      line-height: 0;
      padding: 3% 7%;
    }

    #level > .lesson {
      width: 23%;
      display: inline-block;
      margin: 1%;
      line-height: 0;
      overflow: hidden;
      border: 1px solid #eaeaea;
      border-radius: 20px;
      color: black;
      outline: none;
      text-decoration: none;
    }

    #level > .lesson > a:link, a:active, a:visited, a:hover {
      color: black;
      text-decoration: none;
    }

    #level > .lesson > .lesson-img {
      width: 100%;
    }

    #level > .lesson > .lesson-title {
      margin: 0;
      height: 40px;
      text-align: center;
      font-size: 14px;
      line-height: 40px;
    }
  </style>
@stop

@section('content')
  <div id="level"></div>
@stop

@section('script')
  <script>
    $(document).ready(function () {
      var seriesId = +"{{$seriesId}}" || 1
      $('.site-header').hide()
      $('.site-footer').hide()
      var isRender = false

      showLoading()
      var list = $.grep(@include('LevelIntroduction.template.level'), function (item) {
        return item.seriesId === seriesId && item.logoUri
      })
      preLoadImage(list)

      function preLoadImage (list) {
        var count = 0
        $.each(list, function (index, item) {
          var img = new Image()
          img.src = 'https://gstatic.97kid.com' + item.logoUri
          img.onload = function () {
            count++
            if (count === list.length) render(list)
          }
        })
        setTimeout(function () {
          render(list)
        }, 3000)
      }

      function render (list) {
        if (isRender) return
        isRender = true
        var html = ''
        $.each(list, function (index, item) {
          html += '<a class="lesson" href="/levelintroductionen/' + item.id + '">' +
            '<img class="lesson-img" src="https://gstatic.97kid.com' + item.logoUri + '">' +
            '<p class="lesson-title">' + item.nameEn + '</p>' +
            '</a>'
        })
        $('#level').css('visibility', 'hidden')
        hiddenLoading()
        $('#level').append(html)
        $('#level').css('visibility', '')
        lessonClick();
      }

      function showLoading () {
        $('#loading').css('display', 'block')
      }

      function hiddenLoading () {
        $('#loading').css('display', 'none')
      }

      function lessonClick () {
        $('#level > a.lesson').off('click').on('click', function(e) {
          e.preventDefault();
          if (window.parent) window.parent.postMessage({ lesson: $(this).children('.lesson-title').text()}, '*')
          window.location.href = this.href;
        })
      }
    })
  </script>
@stop